import React, { Component } from "react";
import { Progress, Tabs, Table, message } from "antd";
import { stampToDate } from "../../utils";

import "./mine.less";

const TabPane = Tabs.TabPane;

class Mine extends Component {
  state = {
    total: "",
    myTotal: "",
    holdingList: [],
    teamList: null,
    areabonusList: null,
    holdTotal: 0,
    holdPage: 1,
    teamTotal: 0,
    teamPage: 1,
    areabonusTotal: 0,
    areabonusPage: 1,
    nodalbonusList: null,
    nodalbonusPage: 1,
    nodalbonusTotal: 0,
    commonbonusList: null,
    commonbonusPage: 1,
    commonbonusTotal: 0
  };

  request = window.request;

  componentWillMount() {
    this.getTotal();

    if (sessionStorage.getItem("account")) {
      this.getMyTotal();
      this.getHoldmining(1);
    }
  }

  tabOnChange = key => {
    if (sessionStorage.getItem("account")) {
      if (key === "hold") {
        this.getHoldmining(1);
        this.setState({ holdPage: 1 });
      } else if (key === "team") {
        this.getTeammining(1);
        this.setState({ teamPage: 1 });
      } else if (key === "areabonus") {
        this.getAreabonus(1);
        this.setState({ areabonusPage: 1 });
      } else if (key === "nodalbonus") {
        this.getNodalbonus(1);
        this.setState({ nodalbonusPage: 1 });
      } else if (key === "commonbonus") {
        this.getCommonbonus(1);
        this.setState({ commonbonusPage: 1 });
      }
    }
  };

  //挖矿总量
  getTotal = () => {
    this.request("/mk2/total/info", {
      method: "GET"
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({ total: json.data });
      } else {
        message.error(json.msg);
      }
    });
  };
  //我的收益
  getMyTotal = () => {
    this.request("/mk2/mytotal/info", {
      method: "GET"
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({ myTotal: json.data });
      } else {
        message.error(json.msg);
      }
    });
  };

  //持币挖矿
  getHoldmining = page => {
    this.request("/mk2/history/holdmining", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const holdingList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({ holdingList, holdTotal: json.data.count });
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  //多元挖矿
  getTeammining = page => {
    this.request("/mk2/history/teammining", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const teamList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({ teamList, teamTotal: json.data.count });
        }
      } else {
        message.error(json.msg);
      }
    });
  };
  //区域合伙人分红
  getAreabonus = page => {
    this.request("/mk2/history/areabonus", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const areabonusList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({ areabonusList, areabonusTotal: json.data.count });
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  //节点人分红
  getNodalbonus = page => {
    this.request("/mk2/history/nodalbonus", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const nodalbonusList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({ nodalbonusList, nodalbonusTotal: json.data.count });
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  //普通会员分红
  getCommonbonus = page => {
    this.request("/mk2/history/commonbonus", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const commonbonusList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({ commonbonusList, commonbonusTotal: json.data.count });
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  holdPageOnChange = page => {
    this.setState({ holdPage: page });
    this.getHoldmining(page);
  };

  teamPageOnChange = page => {
    this.setState({ teamPage: page });
    this.getTeammining(page);
  };

  areaPageOnChange = page => {
    this.setState({ areabonusPage: 1 });
    this.getAreabonus(page);
  };

  nodalPageOnChange = page => {
    this.setState({ nodalbonusPage: page });
    this.getNodalbonus(page);
  };

  commonPageOnChange = page => {
    this.setState({ commonbonusPage: page });
    this.getCommonbonus(page);
  };

  render() {
    const {
      holdingList,
      teamList,
      areabonusList,
      total,
      myTotal,
      holdTotal,
      holdPage,
      teamTotal,
      teamPage,
      areabonusTotal,
      areabonusPage,
      nodalbonusList,
      nodalbonusPage,
      nodalbonusTotal,
      commonbonusList,
      commonbonusPage,
      commonbonusTotal
    } = this.state;

    const account = sessionStorage.getItem("account");

    const {
      grantMiningCoinVolumeTotal = "----", //已挖矿量
      miningCoinVolumeTotal = "----", //可挖总量
      lastMiningCoinVolumeTotal = "----", //昨日挖矿
      lockCoinVolumeTotal = "----", //锁仓总量
      destroyCoinVolumeTotal = "----", //销毁总量
      lastMiningDate, //上次挖矿时间
      lastBestHoldCoinVolume //上次最佳持币量
    } = total;

    const {
      myLastBonusVolume = "----", //昨日分红
      myLastMiningVolume = "----", //昨日挖矿量
      myLastMiningHoldVolume = "----", //昨日持币挖矿
      myLastMiningTeamVolume = "----" //昨日团队挖矿
    } = myTotal;

    let percent = 0;
    if (total) {
      percent = (grantMiningCoinVolumeTotal / miningCoinVolumeTotal) * 100;
    }

    const holdingColumns = [
      {
        title: "日期",
        dataIndex: "holdMiningDate",
        key: "holdMiningDate",
        render: text => {
          return <div>{stampToDate(text * 1, "YYYY-MM-DD")}</div>;
        }
      },
      {
        title: "持币数量",
        dataIndex: "holdMiningVolume",
        key: "holdMiningVolume"
      },
      {
        title: "持币排名",
        dataIndex: "holdMiningOrderNo",
        key: "holdMiningOrderNo"
      },
      {
        title: "挖矿量",
        dataIndex: "holdMiningGiveVolume",
        key: "holdMiningGiveVolume"
      }
    ];

    const teamColumns = [
      {
        title: "日期",
        dataIndex: "teamMiningDate",
        key: "teamMiningDate",
        render: text => {
          return <div>{stampToDate(text * 1, "YYYY-MM-DD")}</div>;
        }
      },
      /* {
        title: "团队人数",
        dataIndex: "teamMiningPersonNumber",
        key: "teamMiningPersonNumber"
      }, */
      {
        title: "团队持币总量",
        dataIndex: "teamMiningVolume",
        key: "teamMiningVolume"
      },
      {
        title: "主矿持币量",
        dataIndex: "teamMiningAreaVolume",
        key: "teamMiningAreaVolume"
      },
      {
        title: "挖矿量",
        dataIndex: "teamMiningGiveVolume",
        key: "teamMiningGiveVolume"
      }
    ];

    const areabonusColumns = [
      {
        title: "日期",
        dataIndex: "areaBonusDate",
        key: "areaBonusDate",
        render: text => {
          return <div>{stampToDate(text * 1, "YYYY-MM-DD")}</div>;
        }
      },
      {
        title: "平台手续费分红",
        dataIndex: "areaBonusFixedVolume",
        key: "areaBonusFixedVolume"
      },
      {
        title: "手机号归属地手续费分红",
        dataIndex: "areaBonusPhoneVolume",
        key: "areaBonusPhoneVolume"
      },
      {
        title: "推荐网体下手续费分红",
        dataIndex: "areaBonusReferVolume",
        key: "areaBonusReferVolume"
      }
    ];

    const nodalbonusColumns = [
      {
        title: "日期",
        dataIndex: "nodalBonusDate",
        key: "nodalBonusDate",
        render: text => {
          return <div>{stampToDate(text * 1, "YYYY-MM-DD")}</div>;
        }
      },
      {
        title: "节点人分红量",
        dataIndex: "nodalBonusVolume",
        key: "nodalBonusVolume"
      }
    ];

    const commonbonusColumns = [
      {
        title: "日期",
        dataIndex: "commonBonusDate",
        key: "commonBonusDate",
        render: text => {
          return <div>{stampToDate(text * 1, "YYYY-MM-DD")}</div>;
        }
      },
      {
        title: "普通会员分红量",
        dataIndex: "commonBonusVolume",
        key: "commonBonusVolume"
      }
    ];

    return (
      <div className="content mine">
        <div className="mine-wrap">
          <div className="mine-box global-dashboard">
            <h2>
              {lastMiningDate
                ? stampToDate(lastMiningDate * 1, "YYYY年MM月DD日")
                : "----"}{" "}
              最佳持币量为{" "}
              {lastBestHoldCoinVolume
                ? (lastBestHoldCoinVolume * 1).toFixed(2)
                : "----"}
            </h2>
            <Progress
              percent={percent}
              strokeWidth={20}
              status="active"
              showInfo={false}
            />
            <div className="progress-info clear">
              <div className="global-dashboard-mined pull-left">
                已挖矿:{" "}
                <span className="font-color-primary">
                  {grantMiningCoinVolumeTotal}
                </span>{" "}
                UES
              </div>
              <div className="global-dashboard-available pull-right">
                可挖总量:{" "}
                <span className="font-color-primary">
                  {miningCoinVolumeTotal}
                </span>
              </div>
            </div>
            <ul className="global-dashboard-info">
              <li>
                <strong className="font-color-primary">
                  {lastMiningCoinVolumeTotal}
                </strong>
                昨日挖矿
              </li>
              <li>
                <strong className="font-color-primary">
                  {lockCoinVolumeTotal}
                </strong>
                锁仓总量
              </li>
              <li>
                <strong className="font-color-primary">
                  {destroyCoinVolumeTotal}
                </strong>
                销毁总量
              </li>
            </ul>
          </div>
          <div className="mine-box my-dashboard">
            <h2>我的收益</h2>
            <ul className="my-dashboard-info">
              {/*  <li>
                <span>{myLastBonusVolume || "----"}</span>
                昨日分红(UES)
              </li> */}
              <li>
                <span>{myLastMiningVolume || "----"}</span>
                昨日挖矿总量(UES)
              </li>
              <li>
                <span>{myLastMiningHoldVolume || "----"}</span>
                昨日持币挖矿(UES)
              </li>
              <li>
                <span>{myLastMiningTeamVolume || "----"}</span>
                多元挖矿(UES)
              </li>
            </ul>
            {!account && (
              <div className="min-box-sigin-tip">
                <a href="/signin">登录</a>
                &nbsp;&nbsp;后查看
              </div>
            )}
          </div>
          <div className="mine-box mine-count">
            <Tabs defaultActiveKey="hold" onChange={this.tabOnChange}>
              <TabPane tab="持币挖矿" key="hold">
                <Table
                  dataSource={holdingList}
                  columns={holdingColumns}
                  loading={!holdingList}
                  pagination={{
                    current: holdPage,
                    pageSize: 10,
                    total: holdTotal,
                    onChange: this.holdPageOnChange
                  }}
                />
              </TabPane>
              <TabPane tab="多元挖矿" key="team">
                <Table
                  dataSource={teamList}
                  columns={teamColumns}
                  loading={!teamList}
                  pagination={{
                    current: teamPage,
                    pageSize: 10,
                    total: teamTotal,
                    onChange: this.teamPageOnChange
                  }}
                />
              </TabPane>
              {/* <TabPane tab="区域合伙人分红" key="areabonus">
                <Table
                  dataSource={areabonusList}
                  columns={areabonusColumns}
                  loading={!areabonusList}
                  pagination={{
                    current: areabonusPage,
                    pageSize: 10,
                    total: areabonusTotal,
                    onChange: this.areaPageOnChange
                  }}
                />
              </TabPane>
              <TabPane tab="节点人分红" key="nodalbonus">
                <Table
                  dataSource={nodalbonusList}
                  columns={nodalbonusColumns}
                  loading={!nodalbonusList}
                  pagination={{
                    current: nodalbonusPage,
                    pageSize: 10,
                    total: nodalbonusTotal,
                    onChange: this.nodalPageOnChange
                  }}
                />
              </TabPane>
              <TabPane tab="普通会员分红" key="commonbonus">
                <Table
                  dataSource={commonbonusList}
                  columns={commonbonusColumns}
                  loading={!commonbonusList}
                  pagination={{
                    current: commonbonusPage,
                    pageSize: 10,
                    total: commonbonusTotal,
                    onChange: this.commonPageOnChange
                  }}
                />
              </TabPane> */}
            </Tabs>
            {!account && (
              <div className="min-box-sigin-tip">
                <a href="/signin">登录</a>
                &nbsp;&nbsp;后查看
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Mine;
